<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	</head>	
	<style>  
	.menu {
		width:100%;
		height:35px;
		font-size:14px;
		font-family: "微软雅黑";
		background-color: #666;
		} 
	.menu ul {
		padding:0px;
		list-style-type:none;
		}  
	.menu ul li {
		float:left;
		width:110px; 
		height:35px;
		line-height:35px;
		text-align:center;
		background:darkgray;
		border: 1px white solid;
		position: relative;
		left: 300px;
		}  
	.menu ul li a {
		text-decoration:none;
		color:#000;
		display:block;
		} 
	.menu ul li a:hover{
		background:#fff;
		color:#000;
		}
	.menu ul li ul{
		position:absolute;
		left: -300px;
		display:none;
		}
	.menu ul li ul li {
		float:none;
		width:180px;
		text-align:left;
		} 
	.menu ul li ul li a {
		border-right:none;
		border-top:1px dotted #eee;
		background:lightgray;
		padding-left: 20px;
		} 
	.menu ul li ul li a:hover{
		background:#f00;
		color:#000;
		}
	.menu ul li:hover ul{
		display:block;
		}
	</style>
	
	<body>
	<div class="menu">
		  <ul>  
		    <li><a href="#">div+css</a></li>  
		    <li><a href="#">css入门</a></li>  
		    <li><a href="#">Html基础</a>
		    	<ul>
		    		<li><a href="#">基础三</a></li>
		    		<li><a href="#">基础</a></li>
		    		<li><a href="#">基础三案例三</a></li>
		    		<li><a href="#">基础三案例三案例三</a></li>
		    	</ul>
		    </li> 
		    <li><a href="#">DIV+CSS技巧</a></li>  
		    <li><a href="#">DIV+CSS模板</a></li>  
		    <li><a href="#">基础手册</a></li>  
		  </ul>  
		</div>
	</body>
</html>